﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器与class选择器及复合选择器-jQuery基础</title>
<style>
.aclss{background: #666;font-size: 2.8rem;}
.aclss2{background: #ff0;font-size: 2.8rem;}
</style>
</head>
<body>

<div><img src="images/box.png"/>我在这里种了一棵树</div>    
<div><img src="images/box2.png"/>我在这里养了一条鱼</div>    <br>
<input type="button" id="zoomla" value="若干年以后..." />


<div class="myclass">注意观察我的样式</div>
<div>我的样式是默认的</div>

<h1>复合选择器</h1>
<div class="a1">你好发哥</div>
<p class="a2">你是中国好男人</p>
<span id="a3">做中国好软件</span>
<strong class="a3">做中国好软件</strong>
<span class="a3">做中国好软件</span>

<div class="container" id="ids">
    <div class="row">
        <div class="col-sm">你好</div>
    </div>
</div>

<h1>内容过滤器</h1>
<div id="agc">
<p>我爱发哥发哥爱我</p>
<p>这个春天有多少秋天和冬天</p>
</div>
<div id="agc2">
<p>我爱发哥发哥爱我</p>
<p>这个春天有多少秋天和冬天</p>
</div>

<h1>可见性过滤器</h1>
<div id="b1f">内容模型</div>
<div id="b2f">内容模型</div>
<div id="b3f">内容模型</div>




<script type="text/javascript" src="jquery-3.5.1.min.js"></script>   
<script type="text/javascript">
//ID选择器
$(document).ready(function () {
    $(`#zoomla`).click(function () {
        $(`div`).eq(0).html(`<img src="images/box2.png" />这里长出了一片草`);
        $(`div`).get(1).innerHTML=`<img src="images/box3.png" />这里的鱼没有了`;
    })
})

//class类名选择器
$(document).ready(function(){
    const $aa = $(`.myclass`);
    $aa.css(`background-color`,`#f00`);
    $aa.css(`color`,`#fff`);
})

//复合选择器
$(document).ready(function () {
    $(`.a1,.a2,#a3,strong`).addClass(`aclss`);
})

//层次选择器
$(document).ready(function () {
    $(`#ids .row .col-sm`).addClass(`aclss2`);
    $(`#ids .row`).css(`color`,`#fff`);
    $(`#ids .row`).css(`border`,`11px solid #000`);
})

//内容过滤器
$(document).ready(function () {
    $(`#agc>p:contains("春天")`).css(`color`,`red`);
})

//可见性过滤器
$(document).ready(function () {
    $(`#b2f:hidden`);
})



</script>

</body>
</html>